<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav {
        width: 800px;
        height: 50px;
    }

    .nav ul li {
        float: left;
        padding: 0 10px;
    }

    .nav ul li.active {
        color: red;
    }

    .content {
        width: 800px;
    }

    .content dl {
        height: 120px;
    }

    .content dl dt {
        float: left;
    }

    .content dl dd {
        font-size: 12px;
        line-height: 24px;
    }

    .footer {
        width: 800px;
    }

    .footer button,
    .footer p,
    .nthpage {
        float: left;
    }

    .pagebox {
        float: left;
    }

    .pagebox span {
        float: left;
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        margin: 0 4px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 28px;
    }

    .pagebox span:hover {
        cursor: pointer;
    }

    .pagebox span.on {
        color: red;
    }

    .prevPage {
        width: 30px;
        height: 30px;
    }

    .nextPage {
        width: 30px;
        height: 30px;
    }
</style>

<body>

    <body>
        <input type="text" class="searchTxt"><button class="search">搜索</button><br>
        <div class="nav">
            <ul>
                <li class="active">综合排序</li>
                <li>评价热度</li>
                <li>总收藏</li>
                <li>总月票</li>
                <li>字数</li>
            </ul>
        </div>
        <div class="content"></div>
        <div class="footer">
            <button class="prevPage" disabled></button>
            <div class="pagebox"></div>
            <button class="nextPage">></button>
            <p>共<span class="totalPage">0</span>页</p>
            <p><input type="text" class="nthpage"><button class="go">go</button></p>
        </div>
    </body>
    <script src="data.js"></script>
    <script>

        function Page(obj) {
            Object.assign(this, obj)
            console.log(this, 'this')
            this.init()
        }
        Page.prototype = {
            init: function () {
                var that = this;
                this.num = Math.ceil(that.arr.length / 3);//页码数
                this.render(that.arr)
                this.pageRender(that.num)
                this.bindEvent(that.arr)
                this.sort([...that.arr])
                this.filter()
                this.clear()
            },
            clear: function () {//高亮
                var that = this;
                that.spans.forEach(function (v, i) {
                    v.classList.remove("on")
                })
                that.spans[that.count].classList.add("on")
                if (that.count >= that.num - 1) {
                    that.nextPage.disabled = true;
                } else {
                    that.nextPage.disabled = false;
                }
                if (that.count <= 0) {
                    that.prevPage.disabled = true;
                } else {
                    that.prevPage.disabled = false;
                }
            },
            render: function (x) {//渲染数据
                var that = this;
                that.content.innerHTML = x.slice(that.count * 3, (that.count + 1) * 3).map(function (v, i) {
                    return `<dl>
                              <dt><img src="${v.url}" width="100" height="100"></dt>
                              <dd class="da">${v.title}</dd>
                              <dd>${v.con}</dd>
                              <dd>
                                <span>更新：${v.time}</span>
                                <span>字数：${v.zishu}</span>
                                <span>综合：${v.zonghe}</span>
                                <span>热度：${v.hot}</span>
                                <span>收藏：${v.cang}</span>
                                <span>总月票：${v.yue}</span>
                              </dd>
                          </dl>`
                }).join("")
                that.dl = document.querySelectorAll(".content dl")
            },
            bindEvent: function (x) {//页码的操作事件
                var that = this;

                this.nextPage.onclick = function () {
                    that.count++
                    that.clear()
                    that.render(x)
                }
                this.prevPage.onclick = function () {
                    that.count--
                    that.clear()
                    that.render(x)
                }
                //点击页码
                this.spans.forEach(function (v, i) {
                    v.onclick = function () {
                        that.count = i
                        that.clear()
                        that.render(x)

                    }
                })
                // 点击go
                this.go.onclick = function () {

                    var z = that.nthpage.value;
                    that.count = z - 1;
                    if (z >= 1 && z <= that.num) {
                        that.render(x); that.clear(); that.nthpage.value = ""
                    } else {
                        window.alert('该页码不存在')
                        that.nthpage.value = ""
                    }
                }
            },
            pageRender: function (y) {//渲染页码使用的时str=‘’
                var that = this;
                var str = "";
                for (var i = 0; i < y; i++) {
                    if (i == 0) {
                        str += `<span class="on">${i + 1}</span>`
                    } else {
                        str += `<span>${i + 1}</span>`
                    }
                }
                that.pagebox.innerHTML = str;
                that.spans = document.querySelectorAll(".pagebox span")
                that.totalPage.innerHTML = that.spans.length
            },
            sort: function (x) {//排序的事件
                var that = this;
                this.ul.onclick = function (e) {
                    var t = e.target;
                    that.count = 0
                    if (t.tagName == "LI" && t.innerHTML == "综合排序") {
                        that.brr = x.sort(function (a, b) {
                            return a.zonghe - b.zonghe
                        })
                        that.render(that.brr)
                        that.clear()
                        that.bindEvent(that.brr)//绑定事件处理程序
                        that.lis.forEach(function (v, i) {
                            v.classList.remove("active")//清除激活状态
                        })
                        t.classList.add("active")//设置当前点击项的激活状态:
                    }
                    if (t.tagName == "LI" && t.innerHTML == "评价热度") {
                        that.brr = x.sort(function (a, b) {
                            return a.hot - b.hot
                        })
                        that.render(that.brr)
                        that.bindEvent(that.brr)
                        that.clear()
                        that.lis.forEach(function (v, i) {
                            v.classList.remove("active")
                        })
                        t.classList.add("active")
                    }
                    if (t.tagName == "LI" && t.innerHTML == "总收藏") {
                        that.brr = x.sort(function (a, b) {
                            return a.cang - b.cang
                        })
                        that.render(that.brr)
                        that.bindEvent(that.brr)
                        that.clear()
                        that.lis.forEach(function (v, i) {
                            v.classList.remove("active")
                        })
                        t.classList.add("active")
                    }
                    if (t.tagName == "LI" && t.innerHTML == "总月票") {
                        that.brr = x.sort(function (a, b) {
                            return a.yue - b.yue
                        })
                        that.render(that.brr)
                        that.bindEvent(that.brr)
                        that.clear()
                        that.lis.forEach(function (v, i) {
                            v.classList.remove("active")
                        })
                        t.classList.add("active")
                    }
                    if (t.tagName == "LI" && t.innerHTML == "字数") {
                        that.brr = x.sort(function (a, b) {
                            return a.zishu - b.zishu
                        })
                        that.render(that.brr)
                        that.bindEvent(that.brr)
                        that.clear()
                        that.lis.forEach(function (v, i) {
                            v.classList.remove("active")
                        })
                        t.classList.add("active")
                    }
                }
            },
            filter: function () {//搜索的事件
                var that = this;
                that.btn.onclick = function () {
                    that.count = 0;
                    that.crr = that.arr.filter(function (v, i) {
                        return v.title.indexOf(that.searchTxt.value) != -1
                    })
                    that.num = Math.ceil(that.crr.length / 3)
                    that.render(that.crr)
                    that.pageRender(that.num)
                    that.bindEvent(that.crr)
                    that.sort([...that.crr])
                    // that.searchTxt.value=""
                }
            }
        }
        new Page({
            content: document.querySelector(".content"),
            count: 0,
            arr: data,
            pagebox: document.querySelector(".pagebox"),
            nextPage: document.querySelector(".nextPage"),
            prevPage: document.querySelector(".prevPage"),
            ul: document.querySelector(".nav ul"),
            btn: document.querySelector(".search"),
            searchTxt: document.querySelector(".searchTxt"),
            nthpage: document.querySelector(".nthpage"),
            go: document.querySelector(".go"),
            lis: document.querySelectorAll(".nav li"),
            totalPage: document.querySelector(".totalPage")
        })
    </script>

</html>